<template>
    <div>
        <v-menu
                v-model="showMenu"
                :close-on-content-click="false"
                :nudge-width="200"
                :activator="menuActivator"
                offset-x
        >
            <div class="footer-action soft-box" style="width: 100%">
                <v-row class="flex justify-space-between" style="margin: 0.5rem 0">
                    <span class="blue--text"> {{currentFileData.filename}} </span>
                    <v-icon slot="append" color="red" @click="showMenu = false">
                        mdi-close
                    </v-icon>
                </v-row>
                <slot name="actions">
                    <v-list class="list" color="transparent">
                        <v-list-item-group>
                            <v-list-item
                                    color="transparency"
                                    @click="showTempFileURL"
                            >
                                <v-list-item-content>
                                    <v-list-item-title>获取临时链接</v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item
                                    color="transparency"
                                    @click="deleteFile(currentFileData.data.fileID)"
                            >
                                <v-list-item-content>
                                    <v-list-item-title>删除文件</v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                            <slot name="additional">

                            </slot>
                        </v-list-item-group>
                    </v-list>
                </slot>

            </div>
        </v-menu>
        <v-list
                color="transparent"
        >
            <template v-if="files.length <= 0">
                <v-list-item
                >
                    <v-list-item-content>
                        暂无内容
                    </v-list-item-content>
                </v-list-item>
            </template>
            <v-list-item
                    v-for="(file,index) in files"
                    :key="file.title"
            >
                <v-list-item-avatar
                        rounded
                        tile
                        width="1rem"
                >
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="'#'+getIcon(file.filename)"></use>
                    </svg>
                </v-list-item-avatar>
                <v-list-item-content>

                    <v-list-item-title>
                        <v-chip
                                class="ma-2"
                                color="pink"
                                label
                                small
                                v-if="file.folder"
                                text-color="white"
                                @click="currentFolder = file.folder"
                        >
                            <v-icon left>
                                mdi-folder
                            </v-icon>
                            {{file.folder}}
                        </v-chip>
                        {{file.filename}}
                    </v-list-item-title>
                    <v-list-item-subtitle v-text="file.uploadTime"></v-list-item-subtitle>
                </v-list-item-content>
                <v-list-item-action>
                    <v-btn icon @click="operation($event,index)">
                        <v-icon color="grey lighten-1">mdi-information</v-icon>
                    </v-btn>
                </v-list-item-action>
            </v-list-item>
        </v-list>
        <div class="dialogs">
            <v-dialog
                    width="500"
                    v-model="dialogs.getTempFileURL"
            >
            <v-card>
            <v-card-text class="d-flex flex-column justify-center align-center" style="padding-top: 1rem">
                <svg class="icon" aria-hidden="true" style="width:1.5rem;height:1.5rem;margin:1rem;">
                    <use :xlink:href="'#'+getIcon(currentFileData.filename)"></use>
                </svg>
                <h3 style="margin: 1rem 0">文件名：{{currentFileData.filename}}</h3>
                <p style="word-break: break-all;">链接：{{currentFileData.tempFileURl === null ? '获取中...': (currentFileData.tempFileURl === 'none' ? '获取失败' : currentFileData.tempFileURl)  }}</p>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                        color="primary"
                        text
                        @click="dialogs.getTempFileURL = false"
                >
                    关闭
                </v-btn>
            </v-card-actions>
        </v-card>
                
            </v-dialog>
        </div>
    </div>

</template>

<script>
    import {app, db} from '../common/cloudbase';
    export default {
        name: "FileList",
        data:()=>({
           showFileControl: false,
            showMenu: false,
            menuActivator: null,
            dialogs:{
               getTempFileURL: false
            },
            currentFileData:{
               filename: '',
                index: -1,
                data: null,
                tempFileURl: null
            }
        }),
        methods:{
            operation(event,index){
                console.log(event,index);
                this.menuActivator = event.target;
                let fileData = this.currentFileData;
                fileData.data = this.files[index];
                fileData.index = index;
                fileData.filename = this.files[index].filename;
                setTimeout(()=>{
                    this.showMenu = true;
                    this.showFileControl = true;
                });
            },
            async deleteFile(){
              if(!confirm("你确定删除文件吗？此操作不可逆")) return;
              let data = this.currentFileData.data;
              let filesCellection = db.collection('files');
              Promise.all([filesCellection.doc(data._id).remove(),app.deleteFile({
                  fileList:[data.fileID]
              })]).then((res)=>{
                  console.log(res);
                  let files = this.files;
                  files.splice(this.currentFileData.index,1);
                  this.showMenu = false;
                  alert("删除成功");
              }).catch(()=>{
                  alert("删除失败");
              });
            },
            showTempFileURL(){
                let fileData = this.currentFileData;
                fileData.tempFileURl = null;
                this.dialogs.getTempFileURL = true;
                app.getTempFileURL({
                    fileList:[{
                        fileID:fileData.data.fileID,
                        maxAge: 24 * 60 * 60 * 1000
                    }]
                }).then(res=>{
                    let fileList = res.fileList;
                    fileData.tempFileURl = fileList[0].tempFileURL;
                }).catch(()=>{
                    fileData.tempFileURl = "none";
                })
            },




            getIcon(filename) {
                let type = 'default';
                let suffix = filename.split(".");
                suffix = suffix[suffix.length - 1];
                let types = {
                    image: ['png', 'jpg', 'gif'],
                    video: ['avi', 'mov', 'rmvb', 'rm', 'flv', 'mp4', '3gp'],
                    audio: ['mp3', 'ogg', 'wav'],
                    zip: ['zip', '7z', 'rar', 'gz'],
                    html: ['html'],
                    exe: ['icon-yunpanlogo-11'],
                    json: ['icon-wenjianleixing-json'],
                    iso: ['iso', 'gho']
                }
                let icons = {
                    iso: 'icon-wenjianleixing-jingxiangwenjian',
                    json: 'icon-wenjianleixing-json',
                    exe: 'icon-yunpanlogo-11',
                    html: 'icon-wenjianleixing-html',
                    image: 'icon-wenjianleixing-tupianwenjian',
                    video: 'icon-wenjianleixing-shipinwenjian',
                    zip: 'icon-wenjianleixing-yasuowenjian',
                    audio: 'icon-wenjianleixing-yinle',
                    default: 'icon-wenjianleixing-biaozhuntu-weizhiwenjian',
                }
                let keys = Object.keys(types);
                keys.forEach((key) => {
                    if (types[key].indexOf(suffix) >= 0) {
                        type = key;
                    }
                })

                return icons[type];
            },
        },
        props:{
            files:Array
        }
    }
</script>

<style scoped>

</style>